<template>
	<view style="width: 100%;">
		<view class="u-page">
			<u-loading-page :loading="loading" bg-color="#e8e8e8"></u-loading-page>
			<!-- <u-row customStyle="margin: 5px">
				<u-col span="12">
					<view @click="scan" class="grid-item-box">
						<u--text prefixIcon="scan" iconStyle="font-size: 19px" text="扫码"></u--text>
					</view>
				</u-col>
			</u-row> -->
			<u-row customStyle="margin: 5px">
				<u-col span="10">
					<u-search style="z-index: 999;" :disabled='true' bgColor="rgb(255 255 255)" placeholder="搜索"
						shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
				</u-col>
				<u-col span="2">
					<u-button type="primary" icon="scan" @click="handleScanClick" size="small" shape="circle" text="扫码">
					</u-button>
				</u-col>
			</u-row>
			<u-popup :show="show" @close="close" @open="open">
				<view style="width: 93%;align-self: center;">
					<u--form labelWidth='auto' labelPosition="left" :model="queryParams" :rules="rules" ref="form1">
						<u-form-item label="申请人姓名" prop="applyName" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none" v-model="queryParams.applyName">
							</u--input>
						</u-form-item>
						<u-form-item label="申请人身份证号码" prop="applyIdno" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none" v-model="queryParams.applyIdno">
							</u--input>
						</u-form-item>
						<u-form-item label="联系电话" prop="applyPhone" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none" v-model="queryParams.applyPhone">
							</u--input>
						</u-form-item>
					</u--form>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_search_click">搜索
							</u-button>
						</u-col>
					</u-row>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_reset_click">重置
							</u-button>
						</u-col>
					</u-row>
				</view>
			</u-popup>
			<u-row customStyle="margin-bottom: 10px ">
				<u-col span="12">
					<!-- 					<vue-loadmore :on-loadmore="MyonLoad" :finished="finished">
						<u-empty v-if="DataList.length==0" mode="list"></u-empty>
						<u-cell-group customStyle='background-color: white;' v-else>
							<u-cell v-for="(item, index) in DataList" size="large" isLink clickable
								:title="getItemTitle(item)" :label="getItemLabel(item)" :name=item.id
								@click="handel_cell_click">
							</u-cell>
						</u-cell-group>
					</vue-loadmore> -->

					<u-empty v-if="DataList.length==0" mode="list"></u-empty>
					<u-cell-group customStyle='background-color: white;' v-else>
						<u-cell v-for="(item, index) in DataList" size="large" isLink clickable :title="item.applyName"
							:label="item.items" :name=item.applyNo @click="handel_cell_click">
						</u-cell>
					</u-cell-group>
					<uni-load-more :status="status" :contentText="loadText" @clickLoadMore="MyonLoad" />
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	//适老化改造对象,该页负责：
	//1.获取老人信息列表，下拉继续加载
	//2.提供条件搜索选项
	//3.点击单个老人信息跳转到老人详情
	//4.新增录入老人信息
	import {
		transformPostBody,
		transformRequestURL
	} from "@/utils/requestParams.js";

	import {
		listSlhgzdxdr,
		getSlhgzdxdr,
		delSlhgzdxdr,
		addSlhgzdxdr,
		updateSlhgzdxdr
	} from "@/api/elder/serviceApply.js";
	export default {
		name: "index",
		components: {},
		data() {
			return {
				DataList: [],
				total: 0, //条目总数，用户加载更多
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					applyNo: null,
					applyTime: null,
					items: null,
					applyName: null,
					applyIdno: null,
					applySex: null,
					applyPhone: null,
					applyType: null,
					issubsidy: null,
					selfCareAbility: null,
					diseaseCategory: null,
					careLevel: null,
					disable: null,
					disableCategory: null,
					disableLevel: null,
					householdDistrict: null,
					householdTown: null,
					householdVillage: null,
					householdStreet: null,
					householdRegisterAdd: null,
					permanentDistrict: null,
					permanentTown: null,
					permanentVillage: null,
					permanentStreet: null,
					permanentResidenceAdd: null,
					livingStatus: null,
					houseOwner: null,
					ownerRelationship: null,
					houseType: null,
					residents: null,
					houseCreatedate: null,
					emergencyContactName: null,
					emergencyContactSex: null,
					emergencyContactPhone: null,
					filloutRelationship: null,
					filloutName: null,
					filloutIdno: null,
					filloutPhone: null,
				},
				rules: {},
				loading: false, //加载中提示框显示
				show: false, //搜索框显示
				finished: false, //加载更多完结
				status: 'more', // 显示底部提示
				loadText: {
					contentdown: "点击加载更多",
					contentrefresh: "正在加载",
					contentnomore: "没有更多数据了",
				},
			}
		},
		watch: {},
		computed: {
			// showLoadmore() {
			// 	return this.list.length > 0
			// },
		},
		onShow() {
			//挂载后默认进行第一页的查询，此时没有设置条件
			this.queryParams.pageNum = 1;
			this.getList();
		},
		methods: {
			//条件搜索框
			handle_SearchBox_click() {
				this.show = true
			},
			open() {},
			close() {
				this.show = false
			},
			// MyonLoad(done) {
			// 	console.log('MyonLoad', this.DataList.length, this.total)
			// 	if (this.DataList.length < this.total) {
			// 		this.fetch();
			// 	} else {
			// 		// all data loaded
			// 		this.finished = true;
			// 	}
			// 	done();
			// },
			MyonLoad(e) {
				this.status = 'loading';
				console.log('MyonLoad', this.DataList.length, this.total);
				if (this.DataList.length < this.total) {
					this.fetch();
					this.status = 'more';
				} else {
					// all data loaded
					this.finished = true;
					this.status = 'nomore';
				}
				e.detail = {
					status: 'loading'
				};
				return e;
			},
			//条件搜索按钮点击
			handel_search_click() {
				this.finished = false; //重置搜索完结
				this.queryParams.pageNum = 1; //重置搜索页
				this.DataList = [] //清空原结果集
				this.getList();
				this.show = false; //关闭搜索框
			},
			//条件重置按钮点击
			handel_reset_click() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					applyNo: null,
					applyTime: null,
					items: null,
					applyName: null,
					applyIdno: null,
					applySex: null,
					applyPhone: null,
					applyType: null,
					issubsidy: null,
					selfCareAbility: null,
					diseaseCategory: null,
					careLevel: null,
					disable: null,
					disableCategory: null,
					disableLevel: null,
					householdDistrict: null,
					householdTown: null,
					householdVillage: null,
					householdStreet: null,
					householdRegisterAdd: null,
					permanentDistrict: null,
					permanentTown: null,
					permanentVillage: null,
					permanentStreet: null,
					permanentResidenceAdd: null,
					livingStatus: null,
					houseOwner: null,
					ownerRelationship: null,
					houseType: null,
					residents: null,
					houseCreatedate: null,
					emergencyContactName: null,
					emergencyContactSex: null,
					emergencyContactPhone: null,
					filloutRelationship: null,
					filloutName: null,
					filloutIdno: null,
					filloutPhone: null,
				};
				this.handel_search_click();
			},
			//跳转新增页
			handel_plus_click() {
				this.$tab.navigateTo('/pages/queryDevice/rtDevice')
			},
			//跳转项目明细页
			handel_cell_click(id) {
				this.$tab.navigateTo('/pages/queryDevice/rtDevice?id=' + id.name)
			},

			//扫码并跳转到老人项目页面
			handleScanClick() {
				uni.scanCode({
					// scanType: ['qrCode'],
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.showToast({
							icon: 'none',
							title: '扫码成功,正在跳转...' + '条码内容：' + res.result,
							duration: 2000
						});
						// //校验格式是否正确
						// listSlhgzdxdr({
						// 	id: res.result,
						// 	pageNum: 1,
						// 	pageSize: 3,
						// }).then((response) => {
						// 	console.log(response)
						// 	if (response.rows.length == 1) {
						// 		//格式正确，跳转页面
						// 		this.$tab.navigateTo('/pages/serviceApply/index_project?id=' +
						// 			response.rows[0].applyNo)
						// 	} else {
						// 		uni.showToast({
						// 			icon: 'none',
						// 			title: '验证错误,二维码信息有误',
						// 			duration: 2000
						// 		});
						// 	}
						// });
					},
					fail: function(res) {
						uni.showToast({
							icon: 'none',
							title: '扫码失败，请检查设备或条码是否正常',
							duration: 5000
						});
					},
				});

				this.$tab.navigateTo('/pages/serviceApply/index_project?id=' + id.name)
			},

			//加载更多合并结果
			fetch() {
				this.queryParams.pageNum = this.queryParams.pageNum + 1; //加载下一页
				listSlhgzdxdr(
					this.queryParams
				).then((response) => {
					console.log('response concat', response)
					this.DataList = this.DataList.concat(response.rows);
					this.total = response.total;
				});
			},
			getList() {
				this.loading = true;
				listSlhgzdxdr(
					this.queryParams
				).then((response) => {
					this.loading = false;
					console.log('response listSlhgzdxdr', response)
					this.DataList = response.rows;
					this.total = response.total;
				});
			},
		},

	}
</script>

<style scoped>
	.demo-uni-row {
		margin-bottom: 10px;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	/* 支付宝小程序没有 demo-uni-row 层级 */
	/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	/deep/ .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 4px;
	}


	.mypage-title {
		font-size: 20px;
		font-weight: 600;
		align-self: center;
	}

	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.custom-style {
		width: 90%;
		font-weight: bolder;
		font-size: 15px;
	}
</style>
